<template>
    <div id="comment">
            <el-card class="box-card">
                <div v-for="(item) in aData" :key="item" class="text item" >
                    {{ item }}
                    <el-divider>
                    </el-divider>
                </div>
            </el-card>
        <div id="pages">
            <el-pagination
                    :page-size="pageSize"
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="currentPage"
                    @current-change="currentChange"
                    hide-on-single-page="true">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CommentRegionComponent",
        data(){
            return{
                total:0,
                data:[],
                aData:[],
                pageSize:9,
                currentPage:1,
            }
        },
        mounted() {
            this.initPageManager()
        },
        methods:{
            initPageManager(){
                for(let i=1;i<=30;i++){
                    this.data.push('列表数据'+i)
                }
                this.aData=this.data
                this.total = this.data.length
            },
            currentChange(currentPage){
                let p = (currentPage-1)*this.pageSize
                this.aData = this.data.slice(p,this.data.length)

            }
        }
    }
</script>

<style scoped>
    #comment{
        margin-left: 90px;
        width: 659px;
    }
    #pages{
        width: 659px;
        text-align: center;
    }

    .text {
        font-size: 14px;
    }

    .item {
        padding:0;
    }

    .box-card {
        width: 659px;
        background-color: #fcfcfc;
        max-height: 636px;
    }

</style>